<template>
  <!-- 轮播图模块 -->
  <div>
    <div class="swiper">
      <a-carousel autoplay>
        <div v-for="item in Swiperlist" :key="item.id">
          <a :href="`#/product/${item.id}`">
            <img :src="item.s_photos[0].path" alt="" />
          </a>
        </div>
        <!-- <div><img src="/images/lb02.webp" alt="" /></div>
        <div><img src="/images/lb03.webp" alt="" /></div>
        <div><img src="/images/lb04.webp" alt="" /></div> -->
      </a-carousel>
    </div>
  </div>
</template>

<script>
import { getCarousel } from "@/assets/js/request.js";
export default {
  data() {
    return {
      Swiperlist: [],
    };
  },
  async created() {
    let res = await getCarousel();
    // console.log(res);
    this.Swiperlist = res;
    // console.log(this.Swiperlist);
  },
  methods: {},
};
</script>

<style lang="scss">
.swiper {
  width: 1040px;
  height: 500px;
  float: left;
  position: absolute;
  left: 18%;
  top: 0;
  .ant-carousel >>> .slick-slide {
    text-align: center;
    height: 160px;
    line-height: 160px;
    background: #364d79;
    overflow: hidden;
  }

  .ant-carousel >>> .slick-slide h3 {
    color: #fff;
  }
  img {
    width: 1040px;
    height: 500px;
  }
}
</style>